!white          = #fff
!black          = #000
!light_grey     = #eee
!dark_grey      = #444
!brown          = #807065
!teal           = #61A098
!light_blue     = #C2ECE7
!green          = #bbdd92
!columns        = 6
!column_width   = 130px
!gutter_width   = 16px
!font_size      = 14px
!leading        = 1.5

body, #container
  :background     = !dark_grey
  :color          = !black
  :margin         0
  :padding        0
  :font
    :size         = !font_size
    :family       Arial, Helvetica, sans-serif
  :line-height    = !leading

.sub
  :width          = (!columns * !column_width) + ((!columns - 1) * !gutter_width)
  :margin         0 auto
  :position       relative

#header
  :height         178px
  :background     url(header.gif) left bottom repeat-x
  :border-bottom  = 6px solid !teal
  
  h1
    :width          283px
    :height         0
    :overflow       hidden
    :margin         0
    :padding        160px 0 0
    :background     url(title.gif) left top no-repeat
    :position       absolute
    :left           0
    :top            18px
  
  #tom-link
    :position       absolute
    :left           = (2 * !column_width + 2 * !gutter_width)
    :top            124px
    :background     url(tom.gif) left top no-repeat
    
    a
      :display      block
      :width        119px
      :padding-top  18px
      :height       0
      :overflow     hidden
    
    a:hover
      :background   transparent

#footer
  :color          = !white
  :padding        22px 0
  :border-top     = 6px solid !teal
  
  a
    :color        = !light_blue
    :text-decoration none
  
  a:hover
    :color        = !white
    :background   = !teal

.clear
  :clear          both
  :height         0
  :overflow       hidden
  
#main
  :background     #fff url(main-shadow.gif) center top repeat-x
  :margin         0
  :padding        18px 0

#content
  :float          left
  :width          = 4 * !column_width + 3 * !gutter_width
  
  a
    :text-decoration underline

#sidebar
  :float          right
  :width          = 2 * !column_width + 1 * !gutter_width
  
  a
    :text-decoration none
  
  #download
    :margin-top     = !leading * !font_size
    
    a
      :display        block
      :background     url(download.gif) center top no-repeat
      :font-size      24px
      :padding-top    94px
      :height         = !leading * 24px
      :text-align     center
      :color          = !black
  
  h4
    :font
      :size           16px
    :line-height      = !leading * !font_size
    :margin           = (!leading * !font_size) 0 (!leading * !font_size) 48px
  
  ul
    :padding-left     32px
  
  #osi-link
    :text-align       center

tt, pre, code
  :font-family    Courier New, monospace

#example
  :position       relative
  :font
    :size         36px
    :style        italic
    :family       Georgia, Times New Roman, serif
  
  #run-this-code
    :position     absolute
    :left         0
    :top          0
    :background   = !brown
    :color        = !white
    :padding      2px 4px
    :cursor       pointer
    :text-decoration none
    :font
      :size       11px
      :weight     bold
      :style      normal
      :family     Arial, Helvetica, sans-serif

#front-example
  :color          = !dark_grey
  :background     = !light_blue
  :font
    :size         14px
    :style        normal
  :border-bottom  = 4px solid !brown
  :overflow       hidden

#content tt, #content code
  :background     = !light_grey
  :color          = !dark_grey
  :font-size      0.8em

pre
  :background     = !light_blue
  :color          = !black
  :font-family    Monaco, Consolas, Lucida Console, Courier New, monospace
  :font-size      0.8em
  :padding        1.0em 0

p, ul, pre
  :margin         22px 0

ul, li
  :list-style     circle outside
  :padding        0

li
  :margin-left    32px

ul ul
  :margin         0

a
  :color          = !teal
  :font-weight    bold

a:hover
  :background     = !teal
  :color          = !white
  :text-decoration none

a img
  :border         0

h3
  :margin         22px 0
  :font
    :size         22px
    :family       Arial, Helvetica, sans-serif
    :weight       bold
  :line-height    1.0em
  :letter-spacing -0.04em
  :border-top     = 2px solid !light_grey
